<template>
	<view class="content">
		<!-- 顶部信息 -->
		<view class="header-info">
			<view class="info-item">
			
				<text class="value">{{ cellName }}-{{ unitName }}</text>
			</view>
		</view>
		
		<!-- 添加按钮 -->
		<view class="add-section">
			<view class="add-btn" @click="addNewFloor">
				<text class="iconfont icon-add"></text>
				<text>新增楼层</text>
			</view>
		</view>
		
		
		<!-- 楼层列表 -->
		<view class="floor-list-container">
			<view class="empty-box" v-if="floorList.length === 0">
				<image class="empty-image" src="/static/images/empty.png" mode="aspectFit"></image>
				<text class="empty-text">暂无楼层数据</text>
			</view>
			<view class="floor-list" v-else>
				<view class="floor-item" v-for="(floor, index) in floorList" :key="index">
					<view class="floor-card">
						<!-- 楼层标题和状态 -->
						<view class="floor-header">
							<view class="floor-name" @click="goToRooms(floor)">{{ floor.floorName || '未命名楼层' }}</view>
							<view class="floor-actions">
								<view class="floor-edit" @click="handleEditFloor(floor)">
									<text class="iconfont icon-edit"></text>
									<text class="edit-text">修改</text>
								</view>
							</view>
						</view>
					
					</view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="load-more" v-if="floorList.length > 0">
				<view class="uni-loadmore" v-if="loadMoreStatus === 'loadmore'">
					<view class="uni-loadmore-text" @click="loadMore">点击加载更多</view>
				</view>
				<view class="uni-loadmore" v-else-if="loadMoreStatus === 'loading'">
					<view class="uni-loading"></view>
					<text class="uni-loadmore-text">加载中...</text>
				</view>
				<view class="uni-loadmore" v-else>
					<text class="uni-loadmore-text">没有更多数据了</text>
				</view>
			</view>
		</view>
		
		<!-- 新增楼层弹窗 -->
		<uni-popup ref="addPopup" type="center">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">新增楼层</text>
					<text class="popup-close" @click="closeAddPopup">×</text>
				</view>
				<view class="popup-body">
					<view class="form-item">
						<text class="form-label">楼层名称</text>
						<input class="form-input" v-model="formData.floorName" placeholder="请输入楼层名称" />
					</view>
				
				</view>
				<view class="popup-footer">
					<view class="popup-btn popup-btn-cancel" @click="closeAddPopup">取消</view>
					<view class="popup-btn popup-btn-confirm" @click="submitForm">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 修改楼层弹窗 -->
		<uni-popup ref="editPopup" type="center">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">修改楼层</text>
					<text class="popup-close" @click="closeEditPopup">×</text>
				</view>
				<view class="popup-body">
					<view class="form-item">
						<text class="form-label">楼层名称</text>
						<input class="form-input" v-model="formData.floorName" placeholder="请输入楼层名称" />
					</view>
				
				</view>
				<view class="popup-footer">
					<view class="popup-btn popup-btn-cancel" @click="closeEditPopup">取消</view>
					<view class="popup-btn popup-btn-confirm" @click="submitForm">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { listFloor, addFloor, updateFloor } from "@/api/lock/floor";
	
	export default {
		data() {
			return {
				unitId: null, // 单元ID
				unitName: '', // 单元名称
				cellName: '', // 小区名称
				searchKey: '', // 搜索关键词
				floorList: [], // 楼层列表
				queryParams: {
					unitId: null,
					name: null,
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				loading: false,
				loadMoreStatus: 'loadmore', // loadmore, loading, nomore
				formData: {
					id: null,
					floorName: '',
					floorNo: '',
					unitId: null
				},
				isEdit: false // 是否为编辑模式
			}
		},
		onLoad(options) {
			// 获取路由参数
			if (options.unitId) {
				this.unitId = options.unitId;
				this.unitName = decodeURIComponent(options.unitName || '');
				this.cellName = decodeURIComponent(options.cellName || '');
				this.queryParams.unitId = options.unitId;
			}
			
			// 加载楼层数据
			this.getList();
		},
		onPullDownRefresh() {
			// 下拉刷新
			this.refreshData().finally(() => {
				// 停止下拉刷新动画
				uni.stopPullDownRefresh();
			});
		},
		onReachBottom() {
			// 触底加载更多
			this.loadMore();
		},
		methods: {
			// 获取楼层列表
			getList() {
				if (this.loading) return Promise.resolve();
				
				this.loading = true;
				return new Promise((resolve, reject) => {
					listFloor(this.queryParams).then(response => {
						if (response.code === 200) {
							if (this.queryParams.pageNum === 1) {
								this.floorList = response.rows || [];
							} else {
								this.floorList = [...this.floorList, ...(response.rows || [])];
							}
							
							this.total = response.total || 0;
							
							if (this.floorList.length >= this.total) {
								this.loadMoreStatus = 'nomore';
							} else {
								this.loadMoreStatus = 'loadmore';
							}
						} else {
							uni.showToast({
								title: response.msg || '获取楼层列表失败',
								icon: 'none'
							});
						}
						this.loading = false;
						resolve(response);
					}).catch(error => {
						console.error('获取楼层列表失败：', error);
						uni.showToast({
							title: '获取楼层列表失败',
							icon: 'none'
						});
						this.loading = false;
						reject(error);
					});
				});
			},
			
			// 刷新数据
			refreshData() {
				// 重置分页参数
				this.queryParams.pageNum = 1;
				
				// 返回Promise以便在刷新完成后停止下拉动画
				return this.getList().then(() => {
					// 刷新成功
					uni.showToast({
						title: '刷新成功',
						icon: 'success',
						duration: 1500
					});
				}).catch(error => {
					console.error("刷新数据出错", error);
					uni.showToast({
						title: '刷新失败',
						icon: 'none'
					});
				});
			},
			
			// 加载更多
			loadMore() {
				if (this.loadMoreStatus === 'nomore' || this.loading) return;
				
				this.loadMoreStatus = 'loading';
				this.queryParams.pageNum += 1;
				this.getList().then(() => {
					if (this.floorList.length >= this.total) {
						this.loadMoreStatus = 'nomore';
					} else {
						this.loadMoreStatus = 'loadmore';
					}
				});
			},
			
			// 搜索楼层
			searchFloors() {
				// 重置查询参数
				this.queryParams = {
					unitId: this.unitId,
					pageNum: 1,
					pageSize: 10,
					name: null
				};
				
				const searchText = this.searchKey.trim();
				
				if (searchText) {
					this.queryParams.name = searchText;
				}
				
				uni.showLoading({
					title: '搜索中...'
				});
				
				this.getList().then(() => {
					uni.hideLoading();
					if (this.total === 0) {
						uni.showToast({
							title: '未找到相关楼层',
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						title: '搜索失败，请稍后重试',
						icon: 'none'
					});
					console.error("搜索楼层出错：", error);
				});
			},
			
			// 前往房间页面
			goToRooms(floor) {
				if (!floor || !floor.id) {
					uni.showToast({
						title: '无法获取楼层信息',
						icon: 'none'
					});
					return;
				}
				
				// 跳转到房间页面
				uni.navigateTo({
					url: `/pages/building/rooms?floorId=${floor.id}&floorName=${encodeURIComponent(floor.floorName)}&unitName=${encodeURIComponent(this.unitName)}&cellName=${encodeURIComponent(this.cellName)}`
				});
			},
			
			// 添加新楼层
			addNewFloor() {
				// 清空表单数据
				this.formData = {
					id: null,
					floorName: '',
					unitId: this.unitId
				};
				this.isEdit = false;
				// 打开弹窗
				this.$refs.addPopup.open();
			},
			
			// 关闭新增弹窗
			closeAddPopup() {
				this.$refs.addPopup.close();
			},
			
			// 编辑楼层
			handleEditFloor(floor) {
				if (!floor || !floor.id) {
					uni.showToast({
						title: '无法获取楼层信息',
						icon: 'none'
					});
					return;
				}
				
				// 填充表单数据
				this.formData = {
					id: floor.id,
					floorName: floor.floorName || '',
					floorNo: floor.floorNo || '',
					unitId: this.unitId
				};
				this.isEdit = true;
				// 打开弹窗
				this.$refs.editPopup.open();
			},
			
			// 关闭编辑弹窗
			closeEditPopup() {
				this.$refs.editPopup.close();
			},
			
			// 提交表单
			submitForm() {
				// 表单验证
				if (!this.formData.floorName || this.formData.floorName.trim() === '') {
					uni.showToast({
						title: '请输入楼层名称',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: this.isEdit ? '修改中...' : '添加中...'
				});
				
				// 根据isEdit判断是新增还是修改
				const request = this.isEdit ? 
					updateFloor(this.formData) : 
					addFloor(this.formData);
				
				request.then(response => {
					uni.hideLoading();
					if (response.code === 200) {
						uni.showToast({
							title: this.isEdit ? '修改成功' : '添加成功',
							icon: 'success'
						});
						// 关闭弹窗
						if (this.isEdit) {
							this.closeEditPopup();
						} else {
							this.closeAddPopup();
						}
						// 刷新列表
						this.refreshData();
					} else {
						uni.showToast({
							title: response.msg || (this.isEdit ? '修改失败' : '添加失败'),
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						title: this.isEdit ? '修改失败' : '添加失败',
						icon: 'none'
					});
					console.error(this.isEdit ? '修改楼层出错' : '添加楼层出错', error);
				});
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: "iconfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 32rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-location:before {
		content: "\e758";
		color: #1890ff;
	}

	.icon-edit:before {
		content: "\e66e";
		color: #409EFF;
	}

	.icon-add:before {
		content: "\e657";
	}
	
	.content {
		padding: 20rpx;
		background-color: #f8f9fc;
		min-height: 100vh;
	}
	
	.header-info {
		background: #FFFFFF;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		
		.info-item {
			display: flex;
			align-items: center;
			
			.label {
				font-size: 28rpx;
				color: #666;
				width: 120rpx;
			}
			
			.value {
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}
		}
	}
	
	.add-section {
		margin-bottom: 30rpx;
		padding: 0 20rpx;
	}
	
	.add-btn {
		width: 100%;
		height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(135deg, #4B71F7, #3A5FE0);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 8rpx rgba(75, 113, 247, 0.2);
		
		.iconfont {
			font-size: 32rpx;
			color: #fff;
			margin-right: 10rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #fff;
			font-weight: 500;
		}
		
		&:active {
			transform: scale(0.95);
			opacity: 0.9;
		}
	}
	
	.search-box {
		margin-bottom: 30rpx;
		background: #FFFFFF;
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		
		.search-section {
			display: flex;
			align-items: center;
			gap: 20rpx;
		}
		
		.add-btn {
			width: 100rpx;
			height: 70rpx;
			border-radius: 35rpx;
			background: linear-gradient(135deg, #4B71F7, #3A5FE0);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			box-shadow: 0 4rpx 8rpx rgba(75, 113, 247, 0.2);
			
			text {
				font-size: 28rpx;
				color: #fff;
				font-weight: 500;
			}
			
			&:active {
				transform: scale(0.95);
				opacity: 0.9;
			}
		}
		
		.uni-search-box {
			flex: 1;
			display: flex;
			height: 70rpx;
			background: #f5f7fa;
			overflow: hidden;
			transition: all 0.3s;
			border-radius: 35rpx;
			
			&:active {
				background: #e8ebf0;
			}
		}
		
		.uni-search-input {
			flex: 1;
			height: 70rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			background: transparent;
		}
		
		.uni-search-button {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
			background: #409EFF;
			transition: all 0.3s;
			border-radius: 0 35rpx 35rpx 0;
			
			&:active {
				transform: scale(0.95);
				background: #3a8ee6;
			}
		}
	}
	
	.floor-list-container {
		margin-top: 20rpx;
	}
	
	.empty-box {
		padding: 100rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.empty-image {
		width: 240rpx;
		height: 240rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.floor-list {
		.floor-item {
			margin-bottom: 30rpx;
		}
		
		.floor-card {
			background-color: #FFFFFF;
			border-radius: 16rpx;
			padding: 24rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
			
			&:active {
				background-color: #f9f9f9;
			}
			
			.floor-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #f2f2f2;
				
				.floor-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					flex: 1;
					
					&:active {
						opacity: 0.8;
					}
				}
				
				.floor-actions {
					display: flex;
					align-items: center;
					gap: 16rpx;
				}
				
				.floor-edit {
					display: flex;
					align-items: center;
					padding: 8rpx 16rpx;
					background-color: rgba(64, 158, 255, 0.1);
					border-radius: 20rpx;
					
					.iconfont {
						font-size: 24rpx;
						margin-right: 6rpx;
					}
					
					.edit-text {
						font-size: 24rpx;
						color: #409EFF;
					}
					
					&:active {
						transform: scale(0.95);
						opacity: 0.8;
					}
				}
			}
			
			.floor-content {
				padding: 20rpx 0 0;
				
				.floor-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.info-item {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #666;
						flex: 1;
						
						.iconfont {
							margin-right: 10rpx;
						}
					}
					
					.info-tag {
						padding: 6rpx 20rpx;
						border-radius: 20rpx;
						font-size: 24rpx;
						
						&.status-active {
							background-color: rgba(103, 194, 58, 0.1);
							color: #67C23A;
						}
						
						&.status-inactive {
							background-color: rgba(144, 147, 153, 0.1);
							color: #909399;
						}
					}
				}
			}
		}
	}
	
	.uni-loadmore {
		display: flex;
		flex-direction: row;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0;
	}
	
	.uni-loadmore-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.uni-loading {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		border: 2px solid #ccc;
		border-top-color: #409EFF;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}
	
	// 弹窗样式
	.popup-content {
		width: 600rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}
	
	.popup-header {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f2f2f2;
	}
	
	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.popup-close {
		font-size: 40rpx;
		color: #999;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		&:active {
			color: #666;
		}
	}
	
	.popup-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}
	
	.form-item {
		margin-bottom: 24rpx;
	}
	
	.form-label {
		display: block;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
	}
	
	.form-input {
		width: 100%;
		height: 80rpx;
		background-color: #f5f7fa;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.popup-footer {
		display: flex;
		border-top: 1px solid #f2f2f2;
	}
	
	.popup-btn {
		flex: 1;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		
		&.popup-btn-cancel {
			color: #666;
			background-color: #f5f7fa;
			
			&:active {
				background-color: #e8ebf0;
			}
		}
		
		&.popup-btn-confirm {
			color: #fff;
			background-color: #409EFF;
			
			&:active {
				background-color: #3a8ee6;
			}
		}
	}
</style> 